<template>
  <div class="consumer-page activity-list-page">
    <el-breadcrumb class="breadcrumb page-title" separator=">">
      <el-breadcrumb-item :to="{ path: '' }">Electronics</el-breadcrumb-item>
      <el-breadcrumb-item>data upload</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="container-padding">
      <!--serchBox-->
      <div>
        <el-form label-position="top" size="mini" ref="ruleForm"
                 class="demo-ruleForm main-search-box">
          <el-form-item label="User Name" style="width: 200px;">
            <el-select style="width: 200px" v-model="userId">
              <el-option v-for="i in userNameData" :key="i.userId" :label="i.userName" :value="i.userId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="Category" style="width: 200px;">
            <el-select style="width: 200px" v-model="categoryId">
              <el-option v-for="i in categoryData" :key="i.id" :label="i.label" :value="i.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="margin-top: 37px;">
            <el-upload
              class="upload-demo"
              :action="uploadUrl"
              name="file"
              :data="{userId:userId,categoryId:categoryId}"
              :on-preview="handlePreview"
              :auto-upload="true"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :on-progress="handleProgress"
              :on-success="onUploadSuccess"
              :on-error="onUploadError"
              multiple
              :limit="1"
              :show-file-list="false"
              :on-exceed="handleExceed"
              :file-list="fileList">
              <el-button size="small" style="width: 200px;">Upload excel</el-button>
            </el-upload>
          </el-form-item>

        </el-form>
      </div>
    </div>

  </div>
</template>

<script>
  //获取username的接口
  import {getElectronicsUserName} from '../../api/guc_api.js'
  //获取上传地址中的主机名
  import {uploadUrlCommon} from '../../api/zxy_api.js'

  import qs from 'qs';

  export default {
    name: 'electronicsDataUpload',
    data() {
      return {
        userId: '',
        categoryId: '',
        fileList: [],
        loading: null,
        //username下拉框中的数据
        userNameData: [],
        //category下拉框中的数据
        categoryData: [
          {
            label: 'Smart Watches',
            id: 170
          },
          {
            label: 'Tablets',
            id: 179
          },
          {
            label: 'Mobile Phones',
            id: 142
          }
        ],
        // 上传excel的地址
        uploadUrl: uploadUrlCommon + '/admin/shop/ads/batch_sell',
      }
    },
    methods: {
      messageToastErr(msg) {
        this.$message({
          showClose: true,
          message: msg,
          duration: 5000,
          type: 'error'
        })
      },
      getUserName() {
        getElectronicsUserName()
          .then(res => {
            if (res.data.errorID == 0) {
              this.userNameData = res.data.object
            }
            else {
              this.messageToastErr(res.data.message)
            }
          })
          .catch(err => {
            console.log(err)
          })
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        // this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      // 文件上传时候的钩子
      handleProgress() {
        this.loading = this.$loading({
          lock: true,
          text: 'Uploading',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.7)'
        });
      },
      // 文件上传成功的钩子
      onUploadSuccess(response, file, fileList) {
        this.loading.close();
        if (response.errorID == 0) {
          this.fileList = [];
          this.$message({
            showClose: true,
            message: 'success',
            duration: 5000,
            type: 'success'
          })
        } else {
          this.fileList = [];
          this.$message({
            showClose: true,
            message: response.message,
            duration: 5000,
            type: 'error'
          })
        }
      },
      // 文件上传失败的钩子
      onUploadError(err, file, fileList) {
        this.fileList = [];
        console.dir(err)
      }
    },
    mounted() {
      this.getUserName()
    }
  }
</script>


<style>
  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px !important;
  }

  .breadcrumb {
    margin-bottom: 20px;
  }

  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px;
  }

  .search-box {
    position: relative;
    /*padding-top: 20px;*/
    border-bottom: 1px solid #eee;
  }

  .line-form {
    border-top: 1px solid #eee;
  }

  .more-box, .list-items-box {
    padding-top: 20px;
    padding-bottom: 10px;
  }

  .list-items-box {
    /*margin-right: 10%;*/
  }

  .list-items-box .el-form--inline.el-form--label-top .el-form-item__content {
    display: inline-block;
  }

  .change-status {
    font-size: 14px;
    margin-right: 10px;
  }

  .options {
    padding: 0px 0 20px 0;
  }

  .container-padding {
    padding: 0 40px;
  }

  .list-notes {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
  }

  .new-user-dialog .el-form-item {
    margin-bottom: 0 !important;
  }

  .activity-list-page .el-checkbox + .el-checkbox {
    margin-left: 0 !important;
    margin-right: 30px !important;
  }
</style>
